<!DOCTYPE HTML> <html> <head> <title>pixi.js example 3 using a movieclip</title> <style> body { margin: 0; padding: 0; background-color: #000000; } </style> <script src="pixi.js"></script> <script src="../../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script> </head> <body> <script> // create an array of assets to load var assetsToLoader = [ "SpriteSheet.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); // use callback loader.onComplete = onAssetsLoaded //begin load loader.load(); // holder to store aliens var explosions = []; var count = 0; // create an new instance of a pixi stage var stage = new PIXI.Stage(0xFFFFFF, true);; // create a renderer instance. renderer = new PIXI.CanvasRenderer(800, 600); // add the renderer view element to the DOM document.body.appendChild(renderer.view); function onAssetsLoaded() { // create an array to store the textures var explosionTextures = []; for (var i=0; i < 26; i++) { var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png"); explosionTextures.push(texture); }; // create a texture from an image path // add a bunch of aliens for (var i = 0; i < 2; i++) { // create an explosion MovieClip var explosion = new PIXI.MovieClip(explosionTextures); var container = new PIXI.DisplayObjectContainer(); explosion.position.x = Math.random() * 800; explosion.position.y = Math.random() * 600; explosion.anchor.x = 0.5; explosion.anchor.y = 0.5; explosion.rotation = Math.random() * Math.PI; explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5 explosion.gotoAndPlay(Math.random() * 27); explosion.interactive = true; stage.addChild(explosion); //stage.addChild(container); explosion.click = function() { this.alpha = 0.3; this.addFilter(); //this.parent.addChildAt(this, 4); onRemove(); } if(i == 0) { //runList(container); } } // start animating requestAnimFrame( animate ); runList(stage) } function runList(item) { console.log(">>>>>>>>>") console.log("_") var safe = 0; var tmp = item; console.log(tmp); while(tmp._iNext) { safe++; // console.log(tmp.childIndex + tmp); tmp = tmp._iNext; console.log(tmp);//.childIndex); // console.log(tmp); if(safe > 100) { console.log("BREAK") break } } } function onRemove() { runList(stage) } function animate() { requestAnimFrame( animate ); renderer.render(stage); } </script> </body> </html>